<template>
  <div>
    <ul>
      <li v-for="item in article" :key="item.uid">
        <div class="user-port" @click="ToPersonalCenter(item)">
          <img :src="'http://' + item.picture" alt="" v-if="item.picture" />
          <img src="../../assets/头像.jpg" alt="" v-else />
        </div>
        <h4 @click="ToPersonalCenter(item)">{{ item.username }}</h4>
        <br />
        <p v-if="item.biography">
          {{ item.biography }}
        </p>
        <p v-else>此用户很懒，什么都没写...</p>
      </li>
    </ul>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="pageNum * 10"
      @current-change="currentPage"
      :current-page="page"
    >
    </el-pagination>
  </div>
</template>

<script>
import { mixin } from "../../mixin";
export default {
  name: "AttentionList",
  data() {
    return {
      attentionList: "", //关注列表数据
      page: 1, //分页页数
      article: [], //文章数据
      pageNum: 1,
    };
  },
  mixins: [mixin],
  methods: {
    //获取关注列表数据
    dataLoad() {
      this.$http({
        methods: "post",
        url: "user/findAttentionList",
        params: {
          pageNum: this.page,
          pageSize: 10,
          uid: this.$route.query.id,
        },
      }).then(({ data }) => {
        console.log(data);
        if (data.flag) {
          console.log("文章加载成功!");
          this.article = data.data.list;
          this.pageNum = Math.ceil(data.data.total / 10);
        } else {
          console.log("文章加载失败!");
        }
      });
    },
    // 全部文章切换页码
    currentPage(val) {
      this.article = [];
      this.page = val;
      this.dataLoad();
    },
    //跳转个人中心
    ToPersonalCenter(item) {
      this.$router.push({
        name: "PersonalCenter",
        query: {
          id: item.uid,
        },
      });
    },
  },
  mounted() {
    //参数存在  访问粉丝列表

    this.dataLoad();
  },
};
</script>

<style lang="less" scoped>
.el-pagination {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translate(-50%);
}
ul {
  width: 100%;
  padding: 0px 5px;
  padding-bottom: 50px;
  li {
    height: 80px;
    border-bottom: 1px solid #ccc;
    color: #302f2f;
    .user-port {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      overflow: hidden;
      margin-top: 10px;
      float: left;
      img {
        width: 100%;
        height: 100%;
      }
    }
    h4 {
      margin: 5px 0px;
      margin-left: 20px;
      display: inline-block;
      margin-top: 15px;
      &:hover {
        color: orangered;
        cursor: pointer;
      }
    }
    p {
      margin-left: 20px;
      display: inline-block;
      font-size: 14px;
    }
    &:last-child {
      border-bottom: none;
    }
  }
}
</style>